import styled from "@emotion/styled"
import FormLayout from "@/components/forms/formLayout"
import EasyFormProvider from "@/components/forms/EasyFormProvider"
import _ from "lodash"
import { useNavigate } from "react-router-dom"
import { toast } from "react-toastify"
import { record } from "@/pages/TransactionRecordPage/utils/mock"
import ApiFetchers from "@/apis/api_fetchers"

const InputWrapper = styled.div`
    position: relative;
    margin-top: 40rem;
    margin-bottom: 84rem;
    display: flex;
    width: 100%;
    flex-direction: column;
`

interface SetUsername {
    nick_name: string
}

const UserName = () => {
    const navigate = useNavigate()
    const onSubmit = _.throttle(
        async (data: SetUsername) => {
            const res = await ApiFetchers.refUpdateDetail({ record: data })
            console.log(data, "提交的值")
            // 提交数据
            // 提交成功后跳转到首页
            if (res) {
                toast("Set username successfully")
                setTimeout(() => {
                    navigate("/s-account")
                }, 1000)
            } else {
                toast("Internal Server Error")
                setTimeout(() => {
                    navigate("/s-account")
                }, 800)
            }
        },
        2000,
        { trailing: false },
    )

    return (
        <FormLayout
            title="Set Username"
            description="The username is the unique credential of the account and can be changed once within 90 days."
            backPath="/s-account"
        >
            <InputWrapper>
                <EasyFormProvider
                    // @ts-ignore
                    onSubmit={onSubmit}
                    queryList={["nick_name", "submitButton"]}
                    showSubmitButton={false}
                />
            </InputWrapper>
        </FormLayout>
    )
}

export default UserName
